<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" class="nav-item">
        <el-icon><HomeFilled /></el-icon>
        <span>主页</span>
      </el-menu-item>
      <el-menu-item index="2" class="nav-item">
        <el-icon><PictureFilled /></el-icon>
        <span>图片</span>
      </el-menu-item>
      <el-menu-item index="3" class="nav-item">
        <el-icon><VideoCameraFilled /></el-icon>
        <span>视频</span>
      </el-menu-item>
      <el-menu-item index="4" class="nav-item">
        <el-icon><UploadFilled /></el-icon>
        <span>上传</span>
      </el-menu-item>
    </el-menu>

    <!-- 顶部间距 -->
    <div class="h-6" />

    <!-- 图片标题 -->
    <div class="section-title">
      <el-icon><PictureFilled /></el-icon>
      <span>我的图片</span>
    </div>

    <div class="image-grid">
      <div v-for="(img, idx) in imageUrls" :key="img.id" class="image-card">
        <div class="image-wrapper">
          <el-image
            :src="img.url"
            fit="contain"
            :preview-src-list="imageUrls.map((img) => img.url)"
            :initial-index="idx"
            show-progress
            preview-teleported
            preview-fullscreen
          />
          <div class="overlay"></div>
          <div class="image-name">{{ img.title || "未命名" }}</div>
          <div class="like-button" @click.stop="handleLike(img)">
            <el-icon :class="{ 'is-liked': img.isLiked }"><Star /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :background="true"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getUserImagesService,
  likePictureService,
  unlikePictureService,
} from "@/api/picture";
import type { ComponentSize } from "element-plus";
import {
  PictureFilled,
  VideoCameraFilled,
  HomeFilled,
  UploadFilled,
  Star,
} from "@element-plus/icons-vue";

const router = useRouter();
const activeIndex = ref("2");

const handleSelect = (key: string) => {
  switch (key) {
    case "1":
      router.push("/daily");
      break;
    case "2":
      router.push("/picture");
      break;
    case "3":
      router.push("/video");
      break;
    case "4":
      router.push("/upload");
      break;
  }
};

const currentPage = ref(1);
const pageSize = ref(10);
const size = ref<ComponentSize>("default");
const background = ref(false);
const disabled = ref(false);
const total = ref(0);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getUserImages();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getUserImages();
};

interface BannerItem {
  id: number;
  url: string;
  title: string;
  isLiked?: boolean;
  likeCount?: number;
}
const imageUrls = ref<BannerItem[]>([]);

interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

const getUserImages = async () => {
  try {
    const res = await getUserImagesService({
      current: currentPage.value,
      size: pageSize.value,
    });
    const response = res as unknown as ApiResponse<{
      records: Array<{
        id: number;
        url: string;
        title: string;
        liked: boolean;
        likeCount: number;
      }>;
      total: number;
    }>;
    if (response.code === 0) {
      imageUrls.value = response.data.records.map((img) => ({
        ...img,
        isLiked: img.liked,
      }));
      total.value = response.data.total;
    } else {
      console.error("获取图片列表失败:", response.message);
      ElMessage.error(response.message || "获取图片列表失败");
    }
  } catch (error) {
    console.error("获取图片列表失败:", error);
    ElMessage.error("获取图片列表失败");
  }
};

// 处理喜欢
const handleLike = async (img: BannerItem) => {
  try {
    const data = {
      mediaId: img.id,
      mediaType: "image",
    };

    if (img.isLiked) {
      const response = (await unlikePictureService(
        data
      )) as unknown as ApiResponse<string>;
      if (response.code === 0) {
        img.isLiked = false;
        img.likeCount = Math.max((img.likeCount || 0) - 1, 0);
        ElMessage.success(response.data || "已取消喜欢");
      } else {
        ElMessage.error(response.message || "取消喜欢失败");
      }
    } else {
      const response = (await likePictureService(
        data
      )) as unknown as ApiResponse<string>;
      if (response.code === 0) {
        img.isLiked = true;
        img.likeCount = (img.likeCount || 0) + 1;
        ElMessage.success(response.data || "已添加到喜欢");
      } else {
        ElMessage.error(response.message || "添加喜欢失败");
      }
    }
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败，请稍后重试");
  }
};

onMounted(() => {
  getUserImages();
});
</script>

<style scoped>
.app-container {
  min-height: auto;
  padding-bottom: 20px;
}

.el-menu--horizontal {
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-bottom: none !important;
}

.nav-item {
  position: relative;
  padding: 0 16px;
  color: #303133;
  transition: all 0.3s ease;
}

.nav-item span {
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s ease;
}

.nav-item .el-icon {
  margin-right: 8px;
  color: #303133;
  transition: transform 0.3s ease, color 0.3s ease;
}

.nav-item:hover,
.nav-item.is-active {
  color: #409eff;
}

.nav-item:hover .el-icon,
.nav-item.is-active .el-icon {
  color: #409eff;
  transform: scale(1.1);
}

.section-title {
  position: relative;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin: 40px 0 20px;
  padding-left: 12px;
  border-left: 4px solid #409eff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title .el-icon {
  font-size: 24px;
  color: #409eff;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.image-card {
  width: 260px;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
}

.image-wrapper .el-image {
  width: 100%;
  height: 100%;
}

.image-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
}

.image-card:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.image-card:hover .image-name {
  background: rgba(0, 0, 0, 0.7);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transition: background 0.3s ease;
  border-radius: 12px;
}

.image-card:hover .overlay {
  background: rgba(0, 0, 0, 0.1);
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .image-grid {
    padding: 0 10px;
    gap: 10px;
  }

  .image-card {
    width: calc(50% - 10px);
  }

  .image-wrapper {
    height: 200px;
  }
}

.demo-pagination-block {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.like-button {
  position: absolute;
  bottom: 5px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
  width: 20px;
  height: 20px;
}

.like-button:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.05);
}

.like-button .el-icon {
  font-size: 16px;
  transition: all 0.3s ease;
}

.like-button .is-liked {
  color: #f56c6c;
  transform: scale(1.1);
}
</style>
